import React, { Component } from 'react';
import styles from './index.less';
import MyNavBar from 'components/navbar';
import { InputItem, Toast, List, Button } from 'antd-mobile';
import { createForm } from 'rc-form';
import { phoneRegular, idCardRegular } from 'utils/regular'
import { connect } from 'dva';
import { AUTHENTICATION_FAIL_CODE, SERVICE_TYPE, PROCESS_STATUS, pusherChannelTag } from 'utils/Enum';
import router from 'umi/router';
import { getIsDingTalk } from 'utils/utils'
import commonStyles from 'utils/common.less';
@connect(({ PersonalCertificationModel }) => ({ PersonalCertificationModel }))
class enterpriseCertificationDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			btnDisabled: false,
			verificationText: {
				text: '获取验证码',
				color: '#111F2C',
				fun: this.getVerificationCode
			},
			errorIDCard: false,
			errorPhone: false,
		}
	}
	onSubmit = () => {
		const { dispatch } = this.props
		const { location: { query: { type, Certification } } } = this.props
		this.props.form.validateFields((error, values) => {
			let userType;
			if (!error) {
				Toast.loading('提交中', 0)
				if (Number(Certification) === PROCESS_STATUS.UNKOWN_EXTERNALPUSR_APPLY) {
					dispatch({
						type: 'PersonalCertificationModel/postThirdPhone',
						payload: { ...values, serviceName: SERVICE_TYPE.CONFIRM_AUTH },
						callback: status => {
							if (status === 'success') {
								this.goNextDetail(PROCESS_STATUS.EXPUSR_AUTHORIZING_SUCCESS)
							} else {
								this.goNextDetail(PROCESS_STATUS.EXPUSR_AUTHORIZING_ERROR)
							}
						}
					});
					return;
				}
				switch (type) {
					case AUTHENTICATION_FAIL_CODE.PUSR:
						dispatch({
							type: 'PersonalCertificationModel/postThirdPhone',
							payload: { ...values, serviceName: SERVICE_TYPE.CONFIRM_AUTH },
							callback: status => {
								if (status === 'success') {
									this.goNextDetail(PROCESS_STATUS.PUSR_AUTHORIZING_SUCCESS)
								} else {
									this.goNextDetail(PROCESS_STATUS.PUSR_AUTHORIZING_ERROR)
								}
							}
						})
						break;
					case AUTHENTICATION_FAIL_CODE.EUSR:
						dispatch({
							type: 'PersonalCertificationModel/postThirdPhone',
							payload: { ...values, serviceName: SERVICE_TYPE.CONFIRM_AUTH },
							callback: status => {
								if (status === 'success') {
									this.goNextDetail(PROCESS_STATUS.EPUSR_AUTHORIZING_SUCCESS)
								} else {
									this.goNextDetail(PROCESS_STATUS.EPUSR_AUTHORIZING_ERROR)
								}
							}
						})
						break;
					case AUTHENTICATION_FAIL_CODE.EPUSR:
						dispatch({
							type: 'PersonalCertificationModel/postThirdPhone',
							payload: { ...values, serviceName: SERVICE_TYPE.CONFIRM_AUTH },
							callback: status => {
								if (status === 'success') {
									this.goNextDetail(PROCESS_STATUS.PUSR_AUTHORIZING_SUCCESS)
								} else {
									this.goNextDetail(PROCESS_STATUS.PUSR_AUTHORIZING_ERROR)
								}
							}
						})
						break;
					default:
						break;
				}
			} else {
				Toast.fail('请检查信息是否完整', 2, null, false)
			}
		});
	}

	goNextDetail = (result) => {
		const { location: { query: { type } } } = this.props
		switch (type) {
			case AUTHENTICATION_FAIL_CODE.EUSR:
			case AUTHENTICATION_FAIL_CODE.PUSR:
				router.push({
					pathname: '/Authentication',
					query: {
						status: result
					}
				})
				break;
			case AUTHENTICATION_FAIL_CODE.EPUSR:
				router.push({
					pathname: '/SignCertificationResults',
					query: {
						status: result
					}
				})
				break;
			default:
				break;
		}

	}
	onReset = () => {
		this.props.form.resetFields();
	}
	validateAccount = (rule, value, callback) => {
		if (value && value.length > 4) {
			callback();
		} else {
			callback(new Error('At least four characters for account'));
		}
	}
	//获取验证码
	getVerificationCode = () => {
		const { dispatch } = this.props;
		const { phone } = this.state
		if (phoneRegular.reg.test(phone)) {
			dispatch({
				type: "PersonalCertificationModel/getVerificationCode",
				payload: {
					phone: phone,
					service: SERVICE_TYPE.IDENTITY,
					pusherChannelTag
				},
				callback: response => {
					Toast.success('发送成功！', 2, null, false);
				}
			})
		} else {
			Toast.fail('请输入有效的手机号！', 2, null, false);
			return
		}

		let time = 59;
		let getCode = {
			text: '获取验证码',
			color: '#111F2C',
			fun: this.getVerificationCode,
			desc: ''
		}
		let wait = {
			text: time + '后可重新获取',
			color: '#0089FF',
			fun: () => { },
			desc: '验证码已发送'
		}
		let text = getCode;
		this.setState({
			verificationText: wait
		})
		let timer = setInterval(() => {
			wait.text = time + '后可重新获取';
			if (time == 0) {
				text = getCode
				window.clearInterval(timer);
			} else {
				text = wait
			}
			time--;
			this.setState({
				verificationText: text
			})
		}, 1000)

	}

	getInputValue = () => {
		const { form: { validateFields } } = this.props;
		setTimeout(() => {
			validateFields((error, values) => {
				if (!error) {
					this.setState({
						btnDisabled: true
					})
				} else {
					this.setState({
						btnDisabled: false
					})
				}
			});
		})
	}

	InputIDChange = (e) => {
		if (!idCardRegular.reg.test(e)) {
			this.setState({
				errorIDCard: true
			})
		} else {
			this.setState({
				errorIDCard: false,
			})
		}
		this.getInputValue()
	}
	InputPhoneChange = (e) => {
		if (!phoneRegular.reg.test(e)) {
			this.setState({
				errorPhone: true
			})
		} else {
			this.setState({
				errorPhone: false,
				phone: e
			})
		}
		this.getInputValue()
	}

	render() {
		const { btnDisabled, verificationText, errorIDCard, errorPhone } = this.state;
		const { getFieldDecorator } = this.props.form;
		const { location: { query: { type, url, Certification } } } = this.props;
		const isDingTalk = getIsDingTalk();

		// const contentContainer=' '+commonStyles.headerTop;
		const contentContainer = isDingTalk === 'true' ? '' : ' ' + commonStyles.headerTop;

		return (
			<div className={styles.baseLayout}>
				<MyNavBar title={"手机号认证"} backUrl={`/PersonalCertification?url=${url}&type=${type}&Certification=${Certification}`} />
				{/*<WingBlank>*/}
				<form className={styles.infoForm + contentContainer}>
					<List className={styles.formList}>

						{getFieldDecorator('name', {
							initialValue: '',
							rules: [
								{
									required: true,
									message: '标题内容必填！',
								},
							],
						})(
							<InputItem clear placeholder="填写真实姓名" ref={el => (this.autoFocusInst = el)} onChange={this.getInputValue}>
								真实姓名
                			</InputItem>
						)}
						{getFieldDecorator('idCardNo', {
							initialValue: '',
							rules: [
								{
									required: true,
									message: '标题内容必填！',
									pattern: idCardRegular.reg,
								},
							],
						})(
							<InputItem clear placeholder="填写身份证号" ref={el => (this.autoFocusInst = el)} onChange={this.InputIDChange}>
								身份证号
                			</InputItem>
						)}
						{
							errorIDCard &&
							<div className={styles.errorMsg} style={{}}>
								身份证填写错误
                </div>
						}
						{getFieldDecorator('phone', {
							initialValue: '',
							rules: [
								{
									required: true,
									message: '标题内容必填！',
									pattern: phoneRegular.reg,
								},
							],
						})(
							<InputItem clear placeholder="填写实名登记手号码" ref={el => (this.autoFocusInst = el)} onChange={this.InputPhoneChange}>
								实名手机号
                			</InputItem>
						)}
						{
							errorPhone &&
							<div className={styles.errorMsg} style={{}}>
								手机号填写错误
                			</div>
						}
						{getFieldDecorator('verificationCode', {
							initialValue: '',
							rules: [
								{
									required: true,
									message: '标题内容必填！',
									min: 4,
									max: 6
								},
							],
						})(
							<InputItem className='verificationCode' clear placeholder="填写验证码" ref={el => (this.autoFocusInst = el)} onChange={this.getInputValue}>
								<p className={styles.codeP} onClick={verificationText.fun} style={{ color: verificationText.color }}>{verificationText.text}</p>
							</InputItem>
						)}

					</List>
					{/*<p></p>*/}
				</form>

				<div className={styles.footerContainer}>
					<Button type="primary" shape="round"
						disabled={!btnDisabled}
						onClick={this.onSubmit}>
						立即验证
          			</Button>
				</div>
			</div>
		)
	}
}

export default createForm()(enterpriseCertificationDetail);
